<template lang="html">
    <div class="information-concert-page normal-table-page">
        <Card :dis-hover="true">
            <p slot="title">
                <Icon type="disc"></Icon> 音乐会资讯
            </p>
            <div slot="extra">

                <Input v-model="searchKey" class="search-input" icon="search" placeholder="标题、摘要或作者" style="width: 300px" @keydown.native.enter="doSearch"></Input>
                <Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button>

                <Button type="ghost" class="add-new-btn" icon="plus" @click="showModal = true">新增</Button>
            </div>
            <Table :columns="concertTableColumns" :loading="pageLoading" ref="concertTable" border :data="concertList"></Table>

            <!-- <transition name="fade">
                <div class="loading-cover" v-if="pageLoading">
                    <Spin fix size="large"></Spin>
                </div>
            </transition> -->
            <div class="page-ctrl"  v-if="pageCount">
                <Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20">
                </Page>
            </div>
        </Card>
        <Modal :mask-closable="false" v-model="showModal" :title="selectData ? '编辑':'新增'" :loading="modalLoading" class-name="concert-modal" @on-ok="clickOK()">
            <Form :model="concertForm" ref="concertForm" :rules="concertFormRules" >
                <Row :gutter="10">
                    <Col span="6">
                        <header-img-uploader :img-upload-path="postUrl.uploadConcertImgUrl" :upload-img-data="uploadImgData" @on-upload-success="uploadImgSuccess" :show-img-path="uploadImgCallbackPath"></header-img-uploader>
                    </Col>
                    <Col span="18">
                        <FormItem label="标题" prop="title">
                            <Input v-model="concertForm.title" placeholder="请输入资讯标题"></Input>
                        </FormItem>
                        <FormItem label="作者" prop="author_name">
                            <Input v-model="concertForm.author_name" placeholder="请输入作者"></Input>
                        </FormItem>
                        <FormItem label="摘要" prop="summary">
                            <Input v-model="concertForm.summary" type="textarea" :rows="3" :autosize=" { minRows: 3, maxRows: 3 }" placeholder="请输入摘要"></Input>
                        </FormItem>
                        <FormItem label="链接地址" prop="link_url">
                            <Input v-model="concertForm.link_url" placeholder="请填入链接地址"></Input>
                        </FormItem>
                        <FormItem label="展示顺序" prop="orders">
                            <InputNumber v-model="concertForm.orders" ></InputNumber>
                            <span style="font-size:12px;color:#999;margin-left:5px;">越大越靠后</span>
                        </FormItem>
                        <FormItem label="在APP内显示" prop="isShow">
                            <i-switch v-model="concertForm.isShow" ></i-switch>
                        </FormItem>
                    </Col>
                </Row>

            </Form>
        </Modal>
    </div>
</template>

<script src="./information-concert.js">

</script>

<style lang="scss" src="./information-concert.scss">
</style>
